<template>
  <div>
    <Breadcrumb :style="{ margin: '15px 0' }">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>出库管理</BreadcrumbItem>
      <BreadcrumbItem>门店订单</BreadcrumbItem>
    </Breadcrumb>

    <Content class="layer-content">
      <Form inline>
        <FormItem>
          <Input style="width: 500px" v-model="keywords" search enter-button placeholder="请输入关键字" @on-search="searchGet" @submit.native.prevent/>
        </FormItem>
        <FormItem>
          <Select style="width:120px" placeholder="运单状态" clearable @on-change="selectExpressStatus">
            <Option v-for="item in waybillStatusArray" :value="item.status" :key="item.status">{{ item.statusName }}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button @click="reset">重置</Button>
        </FormItem>
      </Form>
      <Tabs type="card" :animated="false" @on-click="switchTab">
        <TabPane name="9" label="线下发货">
           <Table border :columns="columns2" :data="dataGrid"></Table>
        </TabPane>
        <TabPane name="0" label="平台物流">
           <Table border :columns="columns2" :data="dataGrid"></Table>
        </TabPane>
      </Tabs>
      <HigPager v-model="query" :total="count" :init="init"></HigPager>
      <Modal v-model="modalDetail" :footer-hide="true" title="运单详情" width="80%">
        <detail
          ref="refExpressDetail"
          :orderItem="orderItem"
          :callbank="eventAction"
        ></detail>
      </Modal>
    </Content>
  </div>
</template>
<script>
import detail from "./detail.vue"
export default {
  name: "purchase",
  data() {
    return {
      keywords: null,
      waybillStatusArray: [
        {
          status: 0,
          statusName: "待接单",
        },
        {
          status: 1,
          statusName: "待揽件",
        },
        {
          status: 2,
          statusName: "运输中",
        },
        {
          status: 3,
          statusName: "派送中",
        },
        {
          status: 4,
          statusName: "已签收",
        },
        {
          status: 5,
          statusName: "运单撤销",
        },
        {
          status: 6,
          statusName: "退回",
        },
        {
          status: 8,
          statusName: "拒签",
        },
        {
          status: 11,
          statusName: "订单关闭",
        },
      ],
      modalDetail: false,
      orderItem: {},
      columns2: [
        {
          title: " 收货人",
          key: "recvName",
          width: 120
        },
        {
          title: "联系电话",
          key: "recvMobile",
          width: 130
        },
        {
          title: "物品名称",
          key: "cargoName",
        },
        {
          title: "物流公司",
          key: "corpName",
        },
        {
          title: "运单号",
          key: "waybillNo",
          width: 140
        },
        {
          title: "运费(元)",
          key: "freightAmt",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h("a", { style: { fontSize: "12px", color: "gray" } }, "￥"),

              h("span", params.row.freightAmt.toFixed(2)),
            ]);
          },
        },
        {
          title: "运单状态",
          key: "waybillStatus",
          width: 110,
          render: (h, params) => {
            return h("div", [
              h("Tag",
                {
                  props: {
                    color: this.tagStyle(params.row.waybillStatus)
                  },
                },
                this.parseStatus(params.row.waybillStatus)
              ),
            ]);
          },
        },
        {
          title: "发单时间",
          key: "postTimeStr",
          sortable: true,
          width: 150
        },
        {
          title: "操作",
          key: "action",
          width: 120,
          render: (h, params) => {
            return h("Dropdown",{props: {transfer:true,trigger:'click'}},
              [
                h("a",[h("a","下拉菜单"),h("Icon",{props: {type: "ios-arrow-down"}})]),
                h("DropdownMenu",{slot: "list"},
                  [
                    h("DropdownItem",{nativeOn:{click:()=>{this.openDetail(params.row)}}},"详情")
                  ]
                ),
              ]
            )
          }
        }
      ],
      count: 0,
      dataGrid: [],
      query: {
        pageIndex: 1,
        pageSize: 15,
        equal: {
          orgId: this.$store.getOrg('orgId'),
          lspType: 9
        },
      },
    }
  },
  created() {
    this.init()
  },
  components: {
    detail
  },
  methods: {
    eventAction() {
      this.modalDetail = false
      this.init()
    },
    //搜索
    searchGet() {
      let sqlLike = {
        fields: ["shop_order_id", "cust_name"],
        keyword: this.keywords,
      }
      this.query.sqlLike = sqlLike
      this.query.pageIndex = 1
      this.init()
    },
    //重置
    reset() {
      delete this.query.sqlLike;
      delete this.query.equal.waybillStatus;
      this.keywords = null;
      this.init();
    },
    selectExpressStatus(status) {
      this.query.equal.waybillStatus = status;
      this.init();
    },
    parseStatus(type) {
      let str = "";
      switch (type) {
        case 0:
          str = "待接单";
          break;
        case 1:
          str = "待揽件";
          break;
        case 2:
          str = "运输中";
          break;
        case 3:
          str = "派送中";
          break;
        case 4:
          str = "已签收";
          break;
        case 5:
          str = "运单撤销";
          break;
        case 6:
          str = "退回";
          break;
        case 8:
          str = "拒签";
          break;
        case 10:
          str = "疑难";
        case 11:
          str = "订单关闭";
        case 12:
          str = "收件中";
        case 13:
          str = "已取件";
        case 14:
          str = "揽件失败";
          break;
      }
      return str;
    },
    tagStyle(status) {
      switch(status) {
        case 6:
        case 8:
        case 10:
          return 'warning'
        case 2:
        case 3:
        case 4:
          return 'success'
        case 0:
        case 1:
          return 'blue'
        default:
          return 'volcano'
      }
    },
    //查看详情
    openDetail(order) {
      this.modalDetail = true
      this.orderItem = order
      this.$refs.refExpressDetail.init(order.tmsOrderId)
    },
    //获取仓库门店订单，调用方包括供应商和前置仓库
    init() {
      new this.$rest({
        gateway: 'agroerp',
        service: "agroerp-tms",
        url: "/v1.0/tms/order/page",
        query: this.query,
        action: (res) => {
          if (res.data.code === 20000) {
            this.dataGrid = res.data.data.list
            this.dataGrid.forEach(element => {
              if(!element.freightAmt) element.freightAmt = 0
              element.postTimeStr = this.$date(element.postTime,'yyyy-MM-dd HH:mm')
            })
            this.count = res.data.data.count
          } else {
            this.$Notice.warning({
              title: "获取失败",
              desc: `失败原因：${res.data.msg}`,
            });
          }
        },
      }).get()
    },
    switchTab(name) {
      this.query.equal.lspType = Number(name)
      this.init()
    }
  },
};
</script>